<template>
  <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%" border>
    <el-table-column v-if="isShowSelection" type="selection" width="55">
    </el-table-column>

    <template v-for="(item, index) in tableColumn">

      <el-table-column :key="'t_' + index" v-if="item.slotname" :label="item.label">
        <template slot-scope="scope">
          <div v-if="item.slotname == 'title'">
            <span class="active">{{ scope.row.title }}</span>
          </div>
          <div v-if="item.slotname == 'picture'">
            <img style="width: 100px" :src="`${uploadBaseUrl}${scope.row.picture}`" alt="" />
          </div>
          <div v-if="item.slotname == 'state'">
            <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="2" active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
            <span>{{ scope.row.state == 1 ? "开启" : "关闭" }}</span>
          </div>

          <div v-if="item.slotname == 'addtime'">
            {{ scope.row.addtime.substr(0, 19) }}
          </div>

          <div v-if="item.slotname == 'options'">
            <slot :name="item.slotname" :row="scope.row"></slot>
          </div>

          <div v-if="item.slotname == 'logo'">
            <img style="width: 100px" :src="scope.row.logo" alt="" v-if="scope.row.logo && scope.row.logo.startsWith('http')"/>
            <img style="width: 100px" :src="`${uploadBaseUrl}${scope.row.logo}`" alt="" v-else/>
          </div>
          <div v-if="item.slotname == 'photo'">
            <img 
              v-if="scope.row.photo && scope.row.photo.startsWith('http')" 
              style="width: 100px" 
              :src="scope.row.photo" 
              alt="" 
            />
            <img 
              v-else-if="scope.row.photo" 
              style="width: 100px" 
              :src="`${uploadBaseUrl}${scope.row.photo}`" 
              alt="" 
            />
            <img 
              v-else 
              style="width: 100px" 
              src="@/assets/images/logo.jpg" 
              alt="无图片" 
            />
          </div>
          <div v-if="item.slotname == 'status'">
            <slot name="status" :row="scope.row">
              <span>
                {{ scope.row.typeid === 2 ? '显示' : '不显示' }}
              </span>
            </slot>
          </div>
          <div v-if="item.slotname == 'sex'">
            <slot name="sex" :row="scope.row">
              <span>
                {{ scope.row.sex == 0 ? '女' : scope.row.sex == 2 ? '男' : '未知' }}
              </span>
            </slot>
          </div>
        </template>
      </el-table-column>

      <el-table-column v-else :key="'k_' + index" :prop="item.prop" :label="item.label" :width="item.width"
        :formatter="item.formatter">
      </el-table-column>
    </template>
  </el-table>
</template>
<script>
export default {
  name: "BaseTable",
  props: {
    tableColumn: {
      type: Array,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
      default: true,
    },
    isShowSelection: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      multipleSelection: [],
      uploadBaseUrl: process.env.VUE_APP_UPLOAD_BASE_URL
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit('selection-change', this.multipleSelection);
    }
  }
};
</script>
<style>
.active {
  color:#2198ff;
}
</style>